$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
    let $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)

    // 点击上传触发input的flie
    $('#setImg').on('click', function () {
        $('#getImg').click()
    })

    // getImg
    $('#getImg').on('change', function () {
        let file = this.files[0]
        if (!file) {
            return layui.layer.msg('请选择一张头像图片！')
        }
        $image.cropper('destroy').attr('src', URL.createObjectURL(file)).cropper(options)
    })

    // 确认更换头像
    $('#ok').on('click', function () {
        let baseURL = $image.cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        }).toDataURL('image/png')
        axios({
            url:'/my/update/avatar',
            method:'POST',
            data: `avatar=${encodeURIComponent(baseURL)}`,
        }).then(({ data: res })=>{
            //成功回调
            if(res.status != 0) {
                return layer.layer.msg(res.message)
            }
            layer.layer.msg('恭喜您，修改头像成功！')
            window.parent.getUserInfo()
        }).catch(() => {
            return layer.layer.msg('页面发生错误，请联系管理员')
        })
    })
})